<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>cipra (test)</title>
	<meta name='Generator' content='Zim 0.69.1'>
	<link rel="icon" type="image/x-icon" href="https://kymot.gitee.io/kibrykarni/logo.ico">
	<link rel="shortcut icon" type="image/x-icon" href="https://kymot.gitee.io/kibrykarni/logo.ico">
	<style>
a { 
  color: #36D;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
strike { color: grey; }
u { 
  text-decoration: none;
  background-color: yellow;
}
tt { color: #111; }
h1 { 
  text-decoration: none;
  color: #111; 
  margin-bottom: 0; }
h2 { color: #111; margin-bottom: 0 }
h3 { color: #111; margin-bottom: 0 }
h4 { color: #111; margin-bottom: 0 }
h5 { color: #111; margin-bottom: 0 }
p { margin-top: 0; }
span.zim-tag { color: #ce5c00; }
div.zim-object {
  border-style:solid;
  border-width:1px;
}

.unchecked-box::before {content:"⬜";}
.checked-box::before {content:"✅";}
.xchecked-box::before {content:"❎";}
.migrated-box::before {content:"↪️";}
.unchecked-box {padding:0;list-style: none;}
.checked-box {list-style: none;}
.xchecked-box {list-style: none;}
.migrated-box {list-style: none;}
ul {margin-left:0; padding-left:10px;}

ul {list-style-image: none}
/* ul rule needed to reset style for sub-bullets */

span.insen { color: grey; }
.pages {
  display: block;
  max-width: 700px;
  padding-left: 300px;
}
.menu {
  float: left;
  max-width: 220px;
  border: 0;
  margin-right:0;
  margin-left: 15px;
  position: fixed;
}
hr { clear:both; }
body {
  font-family: "Noto Serif", "Noto Serif CJK SC Regular", "Cambria", "Songti SC", serif;
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  max-width: 1000px;
  margin: 20px auto 20px auto;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
pre {
  display: block;
  color: #000;
  background-color: #EEE;
  font-size: 14px;
  font-variant-ligatures: none;
  font-family: "JetBrains Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "Microsoft Yahei", monospace !important;
  border: none;
  word-break: break-all;
  word-wrap: break-word;
  border-left: 4px solid #236;
  padding: 10px 15px;
}
code {
  border: 1px solid #D7D7D7;
  border-radius: 2px;
}
blockquote {
  font-size: 1em;
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #444;
}
hr {
  display: block;
  height: 2px;
  padding: 0;
  margin: 20px auto;
  border: 0 none;
  border-top: 1px solid #DDD;
}
table {
  border-collapse: collapse;
  width: 100%;
  padding: 0;
  word-break: initial;
}
</style>
</head>
<body>

<!-- Header -->
<div class='header'>
<p align="center">
<div style="display: flex;flex-flow: row nowrap;justify-content: space-between;">
	<a href="https://kymot.gitee.io/kibrykarni/" target="_blank">kibrykarni</a>
	<span>
	<a href='./03.skamysaske/03.01.html-css.html'>lo -1moi lamji</a> | 

	<a href='./index.html'>lo lidne papri</a> | 

	<span class='insen'>lo +1moi lamji</span>
	</span>
	<a href="https://gitee.com/kymot/mijimpe" target="_blank">Gitee papri</a>
</div>
</p>
</div>

<hr />

<div class="menu">
<ul>
<li><a href="./00.about.html" title="00.about" class="page">00.about</a></li>
<li><a href="./01.bangu.html" title="01.bangu" class="page">01.bangu</a></li>
<li><a href="./02.bangysaske.html" title="02.bangysaske" class="page">02.bangysaske</a></li>
<li><a href="./03.skamysaske.html" title="03.skamysaske" class="page">03.skamysaske</a></li>
<li><b>99.cipra (test)</b></li>
</ul>

</div>

<!-- Wiki content -->

<div class='pages'>
	<div class='heading'>
	<h1>cipra (test) <a name='99.cipra (test)'></a></h1>
	</div>

	<div class='content'>
	<p>
<ul>
<li class="unchecked-box">aaa</li>
<li class="checked-box">checked</li>
<li class="xchecked-box">xchecked</li>
<li class="migrated-box">transferred</li>
</ul>
</p>

<p>
<s>处理了一下臃肿的checkbox，替换成了带emoji的svg，减少了近一半的大小。</s>
</p>

<p>
使用包含emoji的伪元素取代了svg，模板文件的大小从8kb多降到了不到6kb。实践中发现把checkbox部分放到单独的css中会有加载不到更新的问题（而且不方便本地试验，因为次目录加载不到相对路径的css），考虑到css已经足够小了，整合到页面中也不是什么问题，所以不再采用单独的css。这样单个页面保存下来还是有样式的，舒服住。	
</p>

<h2>h2</h2>

<br>

<h3>h3</h3>

<br>

<h4>code test</h4>

<br>

<pre>
void main {
    return 0;
}
</pre>

<br>

<h2>blockquote?</h2>

<p>
<div style='padding-left: 30pt'>
blockquote<br>
blockquote?
</div>
</p>

	</div>

	<br />

	<div class='page-footer'>

	</div>

	

</div>

<hr />
<div class='footer'>
<p align="center">
<div style="display: flex;flex-flow: row nowrap;justify-content: space-between;">
	<a href="https://kymot.gitee.io/kibrykarni/" target="_blank">kibrykarni</a>
	<span>
	<a href='./03.skamysaske/03.01.html-css.html'>lo -1moi lamji</a> | 

	<a href='./index.html'>lo lidne papri</a> | 

	<span class='insen'>lo +1moi lamji</span>
	</span>
	<a href="https://gitee.com/kymot/mijimpe" target="_blank">Gitee papri</a>
</div>
</p>
<p align="center">
	<a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/" title="CC0" alt="CC0" target="_blank">
		<img src="cc.png"/><img src="cc0.png"/>
	</a></p>
	<p align='center'>
		<span>la mijimpe cu pilno la'o x. </span><a href='https://zim-wiki.org'><span>Zim</span></a><span></span> .x<br>
		<span>本知识库使用 </span><a href='https://zim-wiki.org'><span>Zim</span></a><span> 制作和生成。</span><br>
<span>Powered by </span><a href='https://zim-wiki.org'><span>Zim</span></a><span>.</span></p>
</div>
</body>
</html>
